<template>
  <div class="wrap">
    <div v-for="item in prizeList" :key="item.id" class="card">
      <div class="cover">
        <cover-image
          v-if="item.cover"
          class="cover-img"
          :src="item.cover"
          size="@72w_72h_1c"
        />
      </div>
      <div class="content">
        <div class="head">
          <span class="title">{{ item.title }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
        <ul class="list">
          <li
            v-for="li in item.list"
            :key="li.uid"
            @click="handleSpace(li.uid)"
          >
            <avatar class="face" :src="li.face" />
            <span class="name">{{ li.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import { useRouter } from 'vue-router'
import Avatar from "@/components/Avatar"
import CoverImage from "@/components/CoverImage"
export default {
  name: "LotteryResult",
  components: {
    Avatar,
    CoverImage,
  },
  props: {
    prizes: {
      type: Object,
    },
  },
  setup(props) {
    const router = useRouter()
    const params = reactive({
      lotteryResult: computed(() => props.prizes?.lottery_result ?? null),
      firstPrizeList: computed(() => params?.lotteryResult?.first_prize_result ?? null),
      firstPrizeImg: computed(() => props.prizes?.first_prize_pic ?? ''),
      firstPrizeDesc: computed(() => props.prizes?.first_prize_cmt ?? ''),
      secondPrizeList: computed(() => params?.lotteryResult?.second_prize_result ?? null),
      secondPrizeImg: computed(() => props.prizes?.second_prize_pic ?? ''),
      secondPrizeDesc: computed(() => props.prizes?.second_prize_cmt ?? ''),
      thirdPrizeList: computed(() => params?.lotteryResult?.third_prize_result ?? null),
      thirdPrizeImg: computed(() => props.prizes?.third_prize_pic ?? null),
      thirdPrizeDesc: computed(() => props.prizes?.third_prize_cmt ?? ''),
      prizeList: computed(() => {
        const arr = [
          { id: 1, title: '一等奖名单', list: params.firstPrizeList, cover: params.firstPrizeImg, desc: params.firstPrizeDesc },
          { id: 2, title: '二等奖名单', list: params.secondPrizeList, cover: params.secondPrizeImg, desc: params.secondPrizeDesc },
          { id: 3, title: '三等奖名单', list: params.thirdPrizeList, cover: params.thirdPrizeImg, desc: params.thirdPrizeDesc }
        ]      
        return arr.filter(item => !!item.list)
      })
    })
    const handleSpace = mid => {
      router.push({ name: 'space', params: { mid } } )
    }
    return {
      ...toRefs(params),
      handleSpace
    }
  } 
}
</script>

<style lang="scss" scoped>     
  .card{
      display: flex;
      padding: 10px;
      @include border1px(#e7e7e7, 1px 0 0);
      .cover {
          @include border1px(#e7e7e7, 1px, 4px);
          width: 50px;
          height: 50px;   
          margin-right: 10px;        
          background: url('~@/assets/images/lottery-pink.png') 50% no-repeat;
          background-size: cover;
      }
      .cover-img {
          padding-bottom: 100%;
      }
      .content {
          flex: 1;
      }
      .head {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-bottom: 10px;   
          min-height: 50px; 
          .desc {
              font-size: 12px;
              color: $color-text-secondary;
              @include max-lines(2);
          }
      }
      .list{ 
          margin: 0;           
          padding: 0;
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          li {
              display: flex;
              align-items: center;
              width: 50%;      
              margin: 10px 0;      
          }
          .face {
              margin-right: 10px;
          }
          .name {
              flex: 1;
              @include max-lines(1);
          }
      }
  }    
</style>